<!--
 * @Description: 我喜欢的
 * @Author: 56208
 * @Date: 2025/4/22 14:45
 * @LastEditors: 56208
 * @LastEditTime: 2025/4/22 14:45
 * @FilePath: D:/vue3-electron-music/src/renderer/src/view/myLove\index.vue
 -->
<template>
  <div class="d-flex">
    <img class="" src="@renderer/assets/picture/touxiang.svg" alt="" width="" />
    <div class="d-flex flex-d-col">
      <h1>我喜欢的音乐</h1>
      <div class="d-al">
        <el-avatar :size="40" :src="useInfo.avatarUrl" />
        <el-text>{{ useInfo.nickname }}</el-text>
      </div>
      <el-button class="w-100" type="primary" plain>播放全部</el-button>
    </div>
  </div>
  <SongList :song-list="songArr"></SongList>
</template>

<script setup lang="ts">
import SongList from '@renderer/components/songList/index.vue'
import { useUserStore } from '@renderer/store/userInfo'
import { computed, getCurrentInstance, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance() as any
const userStore = useUserStore()

const activeTab = ref('songs')
const songArr = ref([])
const useInfo = computed(() => userStore.useInfo)

async function getMyLoveSongs() {
  const res = await proxy.requestApi.song_user_likeList(userStore.useInfo.userId)
  if (res.code !== 200) {
    ElMessage.error('获取已喜欢的音乐失败')
    return
  }
  const songIds = res.ids.join(',')
  const songsRes = await proxy.requestApi.song_detail(songIds)
  console.log(songsRes)
  if (songsRes.code !== 200) {
    ElMessage.error('获取已喜欢的音乐失败')
    return
  }
  songArr.value = songsRes.songs.map((item) => {
    return {
      name: item.name,
      artistName: item.ar.map((item) => item.name).join('/'),
      songTime: item.dt,
      id: item.id,
      alPic: item.al.picUrl
    }
  })
}

onMounted(() => {
  getMyLoveSongs()
})
</script>

<style scoped lang="less"></style>
